<template>
  <div>
    <el-tree-select
      :value.sync="value"
      :multiple="false"
      :data="treeData"
      style="width: 100%"
      :props="{ value: 'id', label: 'name', children: 'children' }"
      :disabled="disabled"
      @change="handleChange"
      :placeholder="$t('labels.pleaseSelect')"
      :onlyChild="false"
      :class="optionClass"
      :filterable="true"
    >
    </el-tree-select>
  </div>
</template>
<script>
import { getDepartments } from "@/api/department";
import elTreeSelect from "@/components/Select/treeSelect.vue";
export default {
  components: { elTreeSelect },
  data() {
    return {
      treeData: [],
      value: "",
    };
  },
  model: {
    prop: "id",
    event: "innerChange",
  },
  methods: {
    getData() {
      getDepartments({}).then((res) => {
        res = res ? res : [];
        this.treeData = res.toTree();
      });
    },
    handleChange({ id, node }) {
      this.value = id;
      this.$emit("innerChange", this.value);
      this.$emit("change", { id: id, node: node });
    },
  },
  watch: {
    id: {
      handler(value) {
        this.value = value;
      },
      immediate:true
    },
  },
  mounted() {
    this.value = this.id;
    this.getData();
  },
  props: {
    id: {
      type: String,
    },
    disabled: {
      type: Boolean,
    },
    optionClass: {
      type: String,
    },
  },
};
</script>
